<template>
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width:100%">
    <el-col>
      <!-- 左侧内容 -->
      <span>{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <!-- 右侧内容 -->
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ treeNode.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element         command是里面的触发事件 -->
          <el-dropdown @command="operateDepts">
            <span>
              操作<i class="el-icon-arrow-down" />
            </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
              <!-- command是上面下拉菜单触发事件@command携带的参数 -->
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
import { delDepartments } from '@/api/departments.js'
export default {
  name: 'TreeTools', // 组件名称
  components: {// 注册组件
  },
  filters: {// 局部过滤器
  },
  props: { // 父传递数据
    treeNode: {
      required: true,
      type: Object
    },
    isRoot: {
      type: Boolean,
      default: false// 不传递默认false
    }
  },
  data () { // 数据变量
    return {
    }
  },
  computed: {// 计算属性
  },
  watch: {// 事件侦听
  },
  activated () { // 组件激活时调用的函数
  },
  created () { // data数据加载完毕执行函数
  },
  mounted () { // DOM首次加载完毕时执行的函数
  },
  updated () { // 数据更新时执行的函数,执行多次
  },
  methods: { // 函数定义
  // 根据id来操作当前部门架构
    operateDepts (type) {
      if (type === 'add') {
        // 进行添加部门
        this.$emit('addDepts', this.treeNode)// 触发一个自定义事件，告诉父组件要显示弹层了，还要传递当前新增的部门
        // 因为是在当前点击的部门下面 去添加新部门
      } else if (type === 'edit') {
        // 进行编辑部门
        this.$emit('editDepts', this.treeNode)// 出发自定义事件点击谁触发谁
      } else {
        // 删除部门   this.$confirm是elmenten-ui提供的确认消息，如果确认进入then，如果取消则进入catch
        this.$confirm('是否确认删除该部门架构').then(() => {
          return delDepartments(this.treeNode.id) // Promise返回对象可以通过在then里面return出来成功执行结果下一次.then的数据就是return出来的
        }).then(() => {
          // 只需要等到成功的时候，通知父组件重新调取整体架构数据然后渲染页面
          this.$emit('delDepts')
          this.$message.success('删除成功')
        })
      }
    }
  }

}
</script>
<style lang='less' scoped>
</style>
